<template>
	<!-- 方式一 -->
	<!-- 触发打开模态框 -->
	<button @click="open = true">Open Modal</button>

	<!-- 包含模态框的内容和关闭的按钮 -->
	<div v-if="open" class="modal">
		<p>Hello from the modal!</p>
		<button @click="open = false">Close</button>
	</div>
	<!-- 
    方式一的缺点：
    当在初始 HTML 结构中使用这个组件时，会有一些潜在的问题：
    position: fixed 能够相对于浏览器窗口放置有一个条件，那就是不能有任何祖先元素设置了 transform、perspective 或者 filter 样式属性。
	也就是说如果我们想要用 CSS transform 为祖先节点 <div class="outer"> 设置动画，就会不小心破坏模态框的布局！
    这个模态框的 z-index 受限于它的容器元素。如果有其他元素与 <div class="outer"> 重叠并有更高的 z-index，则它会覆盖住我们的模态框
   -->

	<div>------------------------------------</div>

	<!-- 方式二 :<Teleport> 提供了一个更简单的方式来解决此类问题，让我们不需要再顾虑 DOM 结构的问题-->
	<button @click="open = true">Open Modal</button>
	<Teleport to="body">
		<div v-if="open" class="modal">
			<p>Hello from the modal!</p>
			<button @click="open = false">Close</button>
		</div>
	</Teleport>
</template>

<script>
	export default {
		data() {
			return {
				open: false,
			};
		},
	};
</script>

<style scoped>
	.modal {
		position: fixed;
		z-index: 999;
		top: 20%;
		left: 50%;
		width: 300px;
		margin-left: -150px;
	}
</style>
